<html>
<head>
<!-- Combo-handled YUI CSS files: -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/combo?2.6.0/build/tabview/assets/skins/sam/tabview.css">
<!-- Combo-handled YUI JS files: -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.6.0/build/yahoo-dom-event/yahoo-dom-event.js&2.6.0/build/imageloader/imageloader-min.js&2.6.0/build/element/element-beta-min.js&2.6.0/build/tabview/tabview-min.js"></script>

<style type="text/css">
	body {
		background-color:#C9D0D6;
	}
	
	#MySpaceTabs {
		margin:4em auto;
		min-width:970px;
		width:74.6em;
	}
</style>
</head>

<body class="yui-skin-sam">

{% if profile_data %}
<div id="MySpaceTabs" class="yui-navset">
    <ul class="yui-nav">
        <li id='profileTab' class="selected"><a href="#tab1"><em>Profile</em></a></li>
        <li id='friendsTab'><a href="#tab2"><em>Friends</em></a></li>
        <li id='albumsTab'><a href="#tab3"><em>Albums</em></a></li>
    </ul>            
    <div class="yui-content">
        <div id='profileTabContent'>
            <p><img src="{{ profile_data.basicprofile.image }}" /></p> 
            <p>Profile URL : <a href="{{ profile_data.basicprofile.webUri }}"> {{ profile_data.basicprofile.webUri }}</a><p>
            <p>Name: <strong> {{ profile_data.basicprofile.name }} </strong> </p> 
            <p>Gender: <strong> {{ profile_data.gender }} </strong> </p>
            <p>Age: <strong> {{ profile_data.age }} </strong> </p>
            <p>Marital Status: <strong> {{ profile_data.maritalstatus }} </strong> </p>
            <p>City: <strong> {{ profile_data.city }} </strong> </p>
            <p>Postal Code: <strong> {{ profile_data.postalcode }} </strong> </p>
            <p>Region: <strong> {{ profile_data.region }} </strong> </p>
            <p>Country: <strong> {{ profile_data.country }} </strong> </p>
        </div>
        <div id='friendsTabContent'>
			{% for friend in friends_data.Friends %}
			  <a href='{{friend.webUri}}'>
			  <img id='{{friend.name}}' title='{{ friend.name }}' border='0'/>
			  </a>
			{% endfor %}
        </div>
        <div id='albumsTabContent'>
            <p>Photos Content Here<p>
        </div>
    </div>
</div>

<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("MySpaceTabs");

// Friends Tab Image Loader
var tabTwoImageGroup = new YAHOO.util.ImageLoader.group('friendsTab', 'mouseover');

{% for friend in friends_data.Friends %}
tabTwoImageGroup.registerSrcImage("{{friend.name}}", "{{ friend.image }}");
{% endfor %}

tabTwoImageGroup.addTrigger('friendsTab', 'focus');
tabTwoImageGroup.name = 'tab_two_group';

// Albums Tab Image Loader

</script> 
{% endif %}

</body>
</html>